import React, { useState, useCallback } from 'react';

// 案例效果
// 根据输入框的输入值, 将该值添加到数组中 ,然后再页面中展示
const Base = () => {
    const [inpvalue, setinpvalue] = useState('');
    const [userArr, setuserArr] = useState([{ id: 1, name: "刘蒙蒙" }, { id: 2, name: '焦廉琨' }])
    const [count, setCount] = useState(0)
    // 定义事件函数
    // 函数组件中, 当该组件的响应数据发生改变的时候, 函数组件重新渲染执行, 导致函数组件内定义的函数,重新创建,
    // 并且赋值该adduserFn变量, 这样的话,就会再堆内存,新增一个存储空间, 存储该函数,有点浪费性能,
    // 希望与该函数无关的操作,不会导致重新创建函数. 这时候就使用到了useCallback 这个hook函数了

    // usecalback 语法:
    // 作用: 主要用来缓存函数的.注意: 是缓存函数的,如下希望缓存的是 赋值给 adduserFn 的函数
    // 语法: useCallBack(()=>{},[依赖的变量])  
    // 参数1: 就是要缓存的函数, 参数2: 就是依赖响应数据, 只有当响应数据改变的时候, 才会重新执行该参数1 的函数
    // 也就是重新创建参数1 这个函数

    // 如下案例: 当useCallback 依赖的项为空数组的时候, 那么useCallback参数1中的函数,没有被被重新创建, 
    // 即使你修改了当前函数组件中响应数据 inpvalue,但是由于我缓存了参数1函数,该函数没有被重新创建, 所以导致
    // 该函数中的inpvalue还是初始化的空字符串,所以点击添加按钮, 就不会添加输入的内容用户

    // const adduserFn = () => {
    //     userArr.push({
    //         id: userArr[userArr.length - 1].id + 1,
    //         name: inpvalue
    //     })
    //     setuserArr([...userArr])
    // }

    const adduserFn = useCallback(() => {
        userArr.push({
            id: userArr[userArr.length - 1].id + 1,
            name: inpvalue
        })
        setuserArr([...userArr])
    }, [inpvalue])


    console.log('执行了');
    return (
        <div>
            <p>使用usecallback</p>
            <p onClick={
                () => {
                    setCount(count + 1)
                }
            }>count:{count}</p>
            <p>
                <input type='text' onChange={
                    (e) => {
                        setinpvalue(e.target.value)
                    }
                } /><button onClick={adduserFn}>添加用户</button>
            </p>

            <ul>
                {
                    userArr.map((item) => {
                        return <li key={item.id}>{item.name}</li>
                    })
                }
            </ul>

        </div>
    );
}

export default Base;
